<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scrolltolower="infinitscroll">
      <mallList :mallList="mallList"></mallList>
      <div class="bgbox"
           v-if="mallList.length==0">
        <img :src="base_url+'/mp_3.1.1/nothing.png'"
             v-if="base_url"
             class="nothing" />
        <div class="text">暂无使用项目</div>
      </div>
    </scroll-view>
  </div>

</template>

<script>
import common from '@/assets/js/mmk_common.js'
import mallList from "@/components/mall_List/mall_List";
export default {
  data () {
    return {
      base_url: common.image_resource,
      mallList: [],
      ticket_id: 0,
      page: 1,
      isbottom: false,
      longitude: 0,
      latitude: 0

    };
  },
  components: {
    mallList
  },
  methods: {
    get_data () {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: '', //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post("api/v4_2/ticket/available_list", {
        page: this.page,
        pageSize: 20,
        id: this.ticket_id,
        user_id: wx.getStorageSync("user_id") || 0,
        lat: this.latitude,
        lng: this.longitude,
      }, response => {
        common.mmk_Loading(1);
        let res = response.data;
        if (res.status_code == 0) {
          if (res.data.data.length == 0 && this.page > 1) {
            this.isbottom = true
          } else if (this.page == 1) {
            this.mallList = res.data.data;
          } else if (res.data.data.length > 0 && this.page > 1) {
            this.mallList.push(...res.data.data);
          }
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    },
    infinitscroll () {
      this.page++
      this.get_data()
    },
    get_location () {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: "gcj02",
            success (res) {
              that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              that.get_data()
            },
            fail () {
              that.longitude = 0
              that.latitude = 0
              that.get_data()
            }
          });
        },
        fail () {
          that.longitude = 0
          that.latitude = 0
          that.get_data()
        }
      });
    },
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "可使用卡券列表"
    });
    this.ticket_id = options.id || 0
  },
  onShow () {
    this.get_location()
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(247, 248, 250, 1);
  .bgbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .nothing {
      width: 170px;
      height: 170px;
      margin: 0 auto;
      display: block;
    }
    .text {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>


